function initBanner() {
    show();
    setBannerModal();
    $('#bannerImgUrl').on('change', function (e) {
        uploadBannerImg(e);
    });
}

function setShowModal(e){
    var itemId = e.attr("id");
    var getData = idGetBannerAll(itemId.substring(15));
    $('#showImg').attr('src', getData.data.img);
    $('#bannerShowUrl').val(getData.data.url);
    $('#bannerShowCreator').val(getData.data.creator);
    $('#bannerShowCreateTime').val(getData.data.createTime.replace('T',' '));
    $('#bannerShowUpdateTime').val(getData.data.updateTime.replace('T',' '));
    $('#bannerShowDescription').val(getData.data.description);
}

function setUpdateModal(id){
    var getData = idGetBanner(id);
    $('#bannerId').val(id);
    $('#bannerImgLabel').children().remove();
    const img = '<img id="img" alt="图片" class="border border-dark" src="' + getData.data.img + '" style="width: 103px;height: 103px;margin-top: -10px">';
    $('#bannerImgLabel').append(img);
    $('#bannerUrl').val(getData.data.url);
    $('#bannerDescription').val(getData.data.description);
}

// 设置表单的值
function setBannerModal() {
    const itemModal = document.getElementById('itemModal');
    if (itemModal) {
        itemModal.addEventListener('show.bs.modal', event => {
            resetBannerForm();
            const button = event.relatedTarget;
            const type = button.getAttribute('data-bs-type');
            const modalTitle = $('#modalTitle');
            const modalSubmit = $('#modalSubmit');
            if (type == 'add') {
                modalTitle.text('添加轮播图');
                modalSubmit.text('添加');
                modalSubmit.off('click').on('click', function () {
                    addBanner();
                });
            } else if (type == 'edit') {
                modalTitle.text('修改轮播图');
                modalSubmit.text('保存');
                modalSubmit.off('click').on('click', function () {
                    updateBanner();
                });
            }
        });
    }
}

function resetBannerForm() {
    document.getElementById('bannerForm').reset();
    var label = $('#bannerImgLabel');
    label.children().remove();
    const row = '<div id="imgMatrix" class="border border-dark">\n' +
        '            <div id="imgHeng"></div>\n' +
        '            <div id="imgShu"></div>\n' +
        '        </div>';
    label.append(row);
}

function show() {
    var getData = pageBanner(1, 8);
    var bannerBody = $('#bannerBody');
    bannerBody.children().remove();
    getData.data.records.forEach(item => {
        var checked = item.state == 1 ? 'checked' : '';
        var row = '<div class="col-3 ">\n' +
            '                                        <label data-bs-toggle="modal" data-bs-target="#showModal" data-bs-type="show" id="productImgLabel' + item.id + '" style="height: 80%; width: 100%" onclick="setShowModal($(this))">\n' +
            '                                            <div class="bg-light card" style="height: 100%;width: 100%" >\n' +
            '                                                <img src="' + item.img + '" class="" style="max-height: 100%; max-width: 100%;">\n' +
            '                                            </div>\n' +
            '                                        </label>\n' +
            '                                        <div class="row pt-0">\n' +
            '                                            <span class="col-6 form-check form-switch">\n' +
            '                                                <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" ' + checked + ' value="' + item.id + '" onclick="setState($(this).val())">\n' +
            '                                                <label class="form-check-label" for="flexSwitchCheckDefault">是否显示</label>\n' +
            '                                            </span>\n' +
            '                                            <span class="col-3 dropdown ms-auto me-4">\n' +
            '                                              <button class="btn dropdown-toggle pt-0" data-bs-boundary="viewport"\n' +
            '                                                      data-bs-toggle="dropdown">操作</button>\n' +
            '                                                <ul class="dropdown-menu dropdown-menu-start"\n' +
            '                                                    style="min-width: 1px;">\n' +
            '                                                    <li>\n' +
            '                                                        <button data-bs-toggle="modal" data-bs-target="#itemModal" data-bs-type="edit" class="dropdown-item" type="button" value="' + item.id + '" onclick="setUpdateModal(this.value)">编辑</button>\n' +
            '                                                    </li>\n' +
            '                                                    <li>\n' +
            '                                                        <button class="dropdown-item" type="button" value="' + item.id + '" onclick="deleteBanner(this.value)">删除</button>\n' +
            '                                                    </li>\n' +
            '                                                </ul>\n' +
            '                                            </span>\n' +
            '                                        </div>\n' +
            '                                    </div>';
        bannerBody.append(row);
    })

    for (let i = getData.data.total + 1; i <= 8; i++) {
        var row = '<div class="col-3 ">\n' +
            '                                        <label data-bs-toggle="modal" data-bs-target="#itemModal" data-bs-type="add" id="productImgLabel"' + i + ' style="height: 80%; width: 100%">\n' +
            '                                            <div class="imgMatrix border border-dark" style="height: 100%; width : 100%;">\n' +
            '                                                <div class="imgHeng"></div>\n' +
            '                                                <div class="imgShu"></div>\n' +
            '                                            </div>\n' +
            '                                        </label>\n' +
            '       </div>'
        bannerBody.append(row);
    }


}
